<template>
  <div>
    <!--面包屑模块-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 10px">
      <el-breadcrumb-item :to="{ path: '/manage/' + this.id }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!--搜索区域-->
      <el-col :span="24">
        <el-col :span="15">
          <el-input placeholder="请输入工号或姓名查询" style="margin-bottom: 10px" v-model="queryInfo.query" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getTeacherList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" style="margin-left: 15px" @click="addTeacher">添加教师</el-button>
        </el-col>
      </el-col>
      <!-- 表格显示区 -->
      <el-table :data="teacherList" border style="width: 100%" ref="filterTeacher" stripe>
        <el-table-column prop="teacherID" label="教师工号" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="150"></el-table-column>
        <el-table-column prop="gender" label="性别" width="200"></el-table-column>
        <el-table-column prop="position" label="职称" width="150">
          <template slot-scope="scope">
            <el-tag type= "primary" v-if = "scope.row.position === '管理员'">管理员</el-tag>
            <el-tag type= "success" v-else-if = "scope.row.position === '讲师'">讲师</el-tag>
            <el-tag type= "warning" v-else-if = "scope.row.position === '教授'">教授</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="password" label="密码" width="200"></el-table-column> -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改信息" placement="top" :enterable="false">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="editTeacher(scope.row.teacherID)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除信息" placement="top" :enterable="false">
              <el-button type="danger" :disabled="scope.row.position === '管理员'" icon="el-icon-delete" size="mini" @click="deleteTeacher(scope.row.teacherID)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="queryInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!--   注册教师对话框   -->
    <el-dialog title="注册教师" :visible.sync="addTeacherDialogVisible" width="50%" @close="addTeacherDialogClosed">
      <el-form :model="addTeacherForm" :rules="addTeacherFormRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="教师工号" prop="teacherID">
          <el-input v-model="addTeacherForm.teacherID" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addTeacherForm.name" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addTeacherForm.gender" placeholder="请选择教师性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="addTeacherForm.position" placeholder="请选择教师职称">
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="教授" value="教授"></el-option>
            <el-option label="讲师" value="讲师"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addTeacherDialogClosed">取消</el-button>
          <el-button type="primary" @click="submitAddTeacherForm">确定</el-button>
        </span>
    </el-dialog>
    <!--  编辑教师信息对话框  -->
    <el-dialog title="编辑教师" :visible.sync="editTeacherDialogVisible" width="50%" @close="editTeacherDialogClosed">
      <el-form :model="editTeacherForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="教师工号" prop="teacherID" disabled>
          <el-input :disabled="editTeacherForm.position !== '管理员'" v-model="editTeacherForm.teacherID" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editTeacherForm.name" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editTeacherForm.gender" placeholder="请选择教师性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职称">
          <el-select v-model="editTeacherForm.position" placeholder="请选择教师职称">
            <el-option label="管理员" value="管理员"></el-option>
            <el-option label="教授" value="教授"></el-option>
            <el-option label="讲师" value="讲师"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="editTeacherForm.password" style="width: 30%" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="editTeacherDialogClosed">取消</el-button>
          <el-button type="primary" @click="submitEditTeacherForm">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MangeUserTeacher',
  data () {
    return {
      id: null,
      // 查询信息
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5
      },
      teacherList: [],
      total: 0,
      // 注册教师
      addTeacherDialogVisible: false,
      addTeacherForm: {
        teacherID: '',
        name: '',
        gender: '',
        position: ''
      },
      addUser: {
        id: '',
        password: '123456abc'
      },
      addTeacherFormRules: {
        teacherID: [
          { required: true, message: '请输入9位教师工号', trigger: 'blur' },
          { pattern: /^[0-9]{9}$/, message: '教师工号必须是9位数字', trigger: 'blur' }
        ]
      },
      // 编辑教师
      editTeacherDialogVisible: false,
      editTeacherForm: {
        teacherID: '',
        name: '',
        gender: '',
        position: '',
        password: ''
      }
    }
  },
  created () {
    this.id = parseInt(this.$route.params.id)
    this.activePath = window.sessionStorage.getItem('activePath')
    this.getTeacherList()
  },
  methods: {
    // 获取表单数据
    getTeacherList () {
      this.$http.get('/teacher/showPage', {
        params: this.queryInfo
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$message.error('读取教师信息失败')
        } else {
          this.teacherList = res.data
          this.total = res.total
        }
      })
    },
    // 页面选择
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getTeacherList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getTeacherList()
    },
    // 添加教师
    addTeacher () {
      this.addTeacherDialogVisible = true
    },
    // 提交注册用户
    submitAddTeacherForm () {
      this.addUser.id = this.addTeacherForm.teacherID
      this.addUser.password = this.addTeacherForm.teacherID.slice(-6)
      // 将教师用户插入user表
      this.$http.post('/teacher/insert', this.addTeacherForm).then(({ data: res }) => {
        if (res.code === 200) {
          this.$message.success('添加教师用户成功')
          this.$http.post('/user/insert', this.addUser).then(({ data: result }) => {
            this.getTeacherList()
            this.addUser = {
              id: '',
              password: ''
            }
            this.addTeacherForm = {
              teacherID: '',
              name: '',
              gender: '',
              position: ''
            }
          })
          this.addTeacherDialogVisible = false
        }
      })
    },
    // 关闭表单框
    addTeacherDialogClosed () {
      this.addTeacherDialogVisible = false
      this.addUser = {
        id: '',
        password: ''
      }
      this.addTeacherForm = {
        teacherID: '',
        name: '',
        gender: '',
        position: ''
      }
    },
    // 编辑教师信息对话框
    editTeacher (teacherID) {
      this.editTeacherDialogVisible = true
      this.$http.get('/teacher/query', {
        params: { teacherID: teacherID }
      }).then(({ data: res }) => {
        if (res.code === 200) {
          this.$http.get('/user/query', {
            params: { id: teacherID }
          }).then(({ data: result }) => {
            if (result.code === 200) {
              this.editTeacherForm.teacherID = res.data.teacherID
              this.editTeacherForm.name = res.data.name
              this.editTeacherForm.gender = res.data.gender
              this.editTeacherForm.position = res.data.position
              this.editTeacherForm.password = result.data.password
            }
          })
        }
      })
    },
    // 提交更新教师信息
    submitEditTeacherForm () {
      const formData = {
        teacherID: this.editTeacherForm.teacherID,
        name: this.editTeacherForm.name,
        gender: this.editTeacherForm.gender,
        position: this.editTeacherForm.position
      }
      const formUserData = {
        id: this.editTeacherForm.teacherID,
        password: this.editTeacherForm.password
      }
      this.$http.post('/teacher/update', formData).then(({ data: res }) => {
        if (res.code === 200) {
          this.$http.post('/user/update', formUserData).then(({ data: result }) => {
            if (result.code === 200) {
              this.$message.success('修改教师信息成功')
              this.editTeacherDialogVisible = false
              this.getTeacherList()
              this.editTeacherForm = {
                teacherID: '',
                name: '',
                gender: '',
                position: '',
                password: ''
              }
            }
          })
        }
      })
    },
    // 关闭对话框
    editTeacherDialogClosed () {
      this.editTeacherForm = {
        teacherID: '',
        name: '',
        gender: '',
        position: '',
        password: ''
      }
      this.editTeacherDialogVisible = false
    },
    // 删除事件
    async deleteTeacher (teacherID) {
      const res = await this.$confirm('此操作将永久删除教师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // 用户取消删除就返回res
      if (res !== 'confirm') {
        this.$message.info('取消删除')
      } else {
        this.$http.delete('/teacher/' + teacherID).then(({ data: result }) => {
          if (result.code !== 200) {
            this.$message.error('删除教师失败')
          } else {
            this.$http.delete('/user/' + teacherID)
            this.$message.success('删除教师成功')
            this.getTeacherList()
            // 刷新页面
            window.location.reload() // 完全刷新页面
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">

</style>
